<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useHomeStore } from '@/stores/module/home'
import { roleStore } from '@/stores/role'
// 国家核心经销商
import tableCoreDealers from '@/components/PermissionsModule/Performance/components/tableCoreDealers.vue'
// 全球各区核心经销商
import globalCoreDealers from '@/components/PermissionsModule/Performance/components/globalCoreDealers.vue'
const props = defineProps({
  showRemainingComponents: {
    type: Boolean,
    default: false,
  },
})
const homeStore = useHomeStore() // 创建store实例
const { homeTableCoreDealers } = storeToRefs(homeStore)
const store = roleStore() as any
const { businessLevel } = store

const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = businessLevel
}
info()
// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = businessLevel // 初始化面板权限

// 深度监听 store.businessLevel
watch(
  () => store.businessLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
</script>
<template>
  <tableCoreDealers v-if="newRole == 3" />
  <div v-if="showRemainingComponents">
    <globalCoreDealers v-if="newRole == 1 || newRole == 2" />
  </div>
</template>
<style lang="scss" scoped></style>
